<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <AdminHeader></AdminHeader>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <AdminAside></AdminAside>
        </el-aside>
        <el-container>
          <el-main>
            <RouterView />
          </el-main>
          <el-footer height="10px">
            <div class="footer">
              <p align="center">Copyright MIT © 2024 admin</p>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout > div {
  width: 100vw;
  height: 100vh;
}
.el-container {
  height: calc(100vh - 60px);
}
.el-header {
  padding: 0;
}
footer {
  display: flex;
  justify-content: center;
  align-items: end;
  background-color: white;
}
</style>
